<template>
  <div class="article-comments">
    <!-- {{id}} -->
    <!-- 评论列表 -->
    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad">
      <van-cell v-for="item in list"
                :key="item.com_id.toString()">
        <van-image slot="icon"
                   round
                   width="30"
                   height="30"
                   style="margin-right: 10px;"
                   :src="item.aut_photo" />
        <span style="color: #466b9d;"
              slot="title">{{item.aut_name}}</span>
        <div slot="label">
          <p style="color: #363636;">{{item.content}}</p>
          <p>
            <span style="margin-right: 10px;">{{item._pubdate | getRelativeTime}}</span>
            <van-button size="mini"
                        type="default"
                        @click="showReplyHanlder(item)">回复</van-button>
          </p>
        </div>
        <van-icon slot="right-icon"
                  name="like-o" />
      </van-cell>
    </van-list>
    <!-- 评论列表 -->
    <!-- 发布文章评论 -->
    <van-cell-group class="publish-wrap">
      <van-field clearable
                 placeholder="请输入评论内容"
                 v-model.trim="content">
        <van-button slot="button"
                    size="mini"
                    type="info"
                    @click="addComment">发布</van-button>
      </van-field>
    </van-cell-group>
    <!-- /发布文章评论 -->

    <!--  发布评论的回复 -->
    <van-popup v-model="replyShow"
               position="bottom"
               round
               style="height: 60%">
      <!-- 单独创建一个回复组件 v-if 创建和销毁 -->
      <comment-reply v-if="replyShow"
                     :currentComment="currentComment"></comment-reply>
    </van-popup>
    <!--  /发布评论的回复 -->
  </div>
</template>

<script>
import { reqGetArticleComments, reqAddComments } from '@/api/comments'
import CommentReply from './CommentReply'
export default {
  name: 'ArticleComment',
  props: {
    id: { // 文章id
      type: String,
      required: true
    }
  },
  components: {
    CommentReply
  },
  data () {
    return {
      list: [], // 评论列表
      loading: false, // 上拉加载更多的 loading
      finished: false, // 是否加载结束
      offset: null,
      content: '', // 输入框的内容
      replyShow: false, // 控制评论回复的布尔值
      currentComment: {} // 被点击的评论项
    }
  },

  methods: {
    async onLoad () {
      const data = await reqGetArticleComments('a', this.id, this.offset)
      // console.log(data) // data中两个字段end_id 结束的id last_id以last_id向后取新数据
      this.offset = data.data.last_id
      const result = data.data.results
      this.list.push(...result)
      // 关闭loading
      this.loading = false
      // 加载完毕将finished设置true
      if (result.length === 0) {
        this.finished = true
      }
    },
    // 发表评论
    async addComment () {
      try {
        // 非空校验
        if (this.content === '') return
        // 发送请求
        const data = await reqAddComments(this.id, this.content)
        // console.log(data) // 响应的结果中new_obj 这个对象中存储是当前评论的信息
        // 将new_obj unshift数组前
        this.list.unshift(data.data.new_obj)
        // 清空content
        this.content = ''
        // 提示用户
        this.$toast.success('发表评论成功')
      } catch (err) {
        this.$toast.fail('当前文章禁止评论')
        this.content = ''
      }
    },
    // 展示评论回复并且获取当前点击的对象
    showReplyHanlder (item) {
      // console.log(item)
      this.replyShow = true
      // 将点击的评论项存储下拉传递commentReply组件
      this.currentComment = item
    }
  }
}
</script>

<style scoped lang='scss'>
// 发表评论的区域是固定在下端的
.publish-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
// 给发表评论区空出地方
.van-list {
  margin-bottom: 45px;
}
</style>
